.common-flow { position: relative; width: 100%; height: 100px; padding-top: 16px; background-color: #21a1eb; }

.common-flow .steps { position: relative; height: 50px; margin: 0 10px; z-index: 3; }
.common-flow .steps .step { position: absolute; width: 72px; height: 50px; margin-left: -42px; text-align: center; }
.common-flow .steps .step:first-child { margin-left: 0; }
.common-flow .steps .step:nth-child(2) { margin-left: -34px; }
.common-flow .steps .step:nth-child(3) { margin-left: -70px; }

.common-flow .steps .num { width: 44px; height: 44px; margin: 0 auto; border-radius: 44px; }
.common-flow .steps .num span { display: block; width: 44px; height: 44px; border-radius: 44px; line-height: 40px; background-color: #21a1eb; text-align: center; font-size: 20px; color: #a9d3f5; border: 1px solid #a9d3f5; }
.common-flow .steps .text { height: 44px; font-size: 12px; color: #a9d3f5; margin-top: 8px; line-height: 18px; }

.common-flow .steps .active { margin-top: -5px; }
.common-flow .steps .active .num { width: 44px; height: 44px; border-radius: 44px; margin-top: -2px; }
.common-flow .steps .active .num span { width: 54px; height: 54px; border-radius: 54px; line-height: 52px; background-color: #FFF; margin-top: 2px; color: #21a1eb; }
.common-flow .steps .active .text { color: #FFF; margin-top: 14px; line-height: 16px; margin-left: 12px; }

.common-flow .steps .pass .num { }
.common-flow .steps .pass .num span { border-color: #FFF; color: #FFF; }
.common-flow .steps .pass .text { color: #FFF; }

.common-flow .line { position: absolute; top: 36px; left: 35px; right: 35px; z-index: 1; height: 3px; background-color: #fff; }
// .common-flow .line .bg { height: 1px; margin: 0px; background-color: #999; }

.common-flow .percent { position: absolute; top: 0px; left: 0px; z-index: 2; height: 6px; background-color: #fff; }
.common-flow .percent .bg { width: 100%; height: 1px; margin: 0px; background-color: #7abdff; }



